/*
 * @Description: 原数据管理标签栏切换
 * @Author: Rfan
 * @Date: 2022-01-21 09:13:35
 * @LastEditTime: 2022-03-23 18:42:10
 */

import { Button, Form, Input } from 'antd';
// import classNames from 'classnames/bind';

import '@/components/form-builder/styles/configs.less';
import { selectItemByKey } from '@/utils/list';
// import styles from './configPane.module.scss';
// const cx = classNames.bind(styles);
const fieldList = [
  {
    key: 0,
    fieldKey: 0,
    type: 'number',
    required: false,
    label: '金额',
    className: 'form-control',
    name: 'je',
    access: false
  },
  {
    key: 1,
    fieldKey: 1,
    value: '2020',
    type: 'date',
    required: false,
    label: '日期',
    className: 'form-control',
    name: 'date',
    access: false
  }
];
console.log(fieldList);

const ConfigPane = () => {
  const onFinish = (values: any) => {
    console.log('Success:', values);
  };

  return (
    <>
      <Form onFinish={onFinish}>
        <Form.List name="list" initialValue={fieldList}>
          {(fields) => {
            return fields.map(({ name, fieldKey, key, ...restField }: any) => {
              const item: any = selectItemByKey(key, fieldList, 'key');
              return (
                <Form.Item
                  {...restField}
                  key={key}
                  label={item.label}
                  name={[name, 'value']}
                  fieldKey={[fieldKey, 'name']}
                >
                  <Input />
                </Form.Item>
              );
            });
          }}
        </Form.List>
        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
        </Form.Item>
      </Form>
    </>
  );
};

export default ConfigPane;
